<template>
  <div class="address-item">
    <van-address-list
      v-if="$route.query.from != 'mine'"
      v-model="chosenAddressId"
      :list="addresslist"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="select"
    />
    <van-address-list
      v-else
      v-model="chosenAddressId"
      :list="addresslist"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {getAddressList} from '@/service/address'

const route = useRoute()
const router = useRouter()

const addresslist = ref([])
const chosenAddressId = ref('1')

onMounted(async () => {
  const {data} = await getAddressList()
  if (!data.length) return
  addresslist.value = data.map(item => ({
    id: item.addressId,
    name: item.userName,
    tel: item.userPhone,
    address: `${item.provinceName} ${item.cityName} ${item.regionName} ${item.detailAddress}`,
    isDefault: !!item.defaultFlag
  }))
})

function onAdd() {
  router.push({path: '/addressEdit', query: {type: 'add', from: route.query.from}})
}
function onEdit(item) {
  router.push({ path: '/addressEdit', query: {type: 'edit', addressId: item.id, from: route.query.from}})
}
</script>

<style lang="less" scoped>
@import '@/assets/style/var.less';

.van-radio__icon {
  display: none;
}
.address-item {
  display: flex;
  align-items: center;
  :deep(.van-address-list) {
    width: 100%;
  }
  .van-button {
    background: @primary;
    border-color: @primary;
  }
}
</style>